<template>
  <div class="content-right">
    <div class="right-wrapper right-notice">
      <h4>公告栏</h4>
      <span class="notice-line"></span>
      <p>
        春天在哪里呀，春天在哪里 春天在这小村里，这里有红花呀
        这里有绿草，还有那会唱歌的小黄莺
      </p>
    </div>
    <div class="right-wrapper right-lable">
      <h4>标签</h4>
      <span class="notice-line"></span>
      <ul>
        <li>标签(20)</li>
        <li>标签(6)</li>
        <li>标签一(20)</li>
        <li>标签一(20)</li>
        <li>标签一(20)</li>
        <li>标签一(20)</li>
        <li>标签一(20)</li>
        <li>标签一(20)</li>
      </ul>
    </div>
    <div class="right-wrapper right-calendar">
      <h4>日历</h4>
      <span class="notice-line"></span>
      <ul>
        <li>2021.3.1</li>
        <li>2021.3.21</li>
        <li>2021.3.30</li>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
.content-right {
  width: 20vw;
  height: 100%;
  .right-wrapper {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
    h4 {
      font-size: 22px;
      font-weight: 500;
      font-family: "黑体";
    }
    .notice-line {
      display: block;
      height: 2px;
      width: 100%;
      background: rgb(152, 189, 224);
      margin: 10px 0;
    }
  }
  .right-notice {
    //公告
    p {
    }
  }
  .right-lable {
    //标签
    ul {
      // display: flex;
      li {
        padding: 0px 4px;
        font-size: 18px;
        float: left;
        list-style: none;
        background-color: skyblue;
        margin: 0 6px 6px 0;
      }
    }
  }
  .right-calendar {
    //日历
    ul {
      li {
        list-style: none;
        font-size: 18px;
        background-color: pink;
        margin-bottom: 6px;
        padding: 0px 4px;
      }
    }
  }
}
</style>